<template>
  <div>
    <van-nav-bar
      class="navbar"
      title="城市列表"
      left-arrow
      @click-left="$router.back()"
      :fixed="true"
    />
    <van-list v-model="loading" :finished="finished">
      <div class="gaodu">
        <van-index-bar
          :index-list="keywords"
          :sticky-offset-top="50"
          highlight-color="green"
        >
          <div v-for="(item, index) in indexList" :key="index">
            <van-index-anchor :index="item.code" />
            <van-cell
              :title="ite.label"
              v-for="ite in item.list"
              :key="ite.value"
              @click="chooseu(ite)"
            />
          </div>
        </van-index-bar>
      </div>
      <loading v-if="isShow"></loading>
    </van-list>
  </div>
</template>

<script>
import loading from "@/components/loading";
import { cityList, hotcity, houseinfo } from "@/api/citymsg";
import { setCity,getCity} from "@/api/cityCode";
export default {
  name: "city-page",
  components: { loading },
  props: {},
  data() {
    return {
      indexList: [],
      hotList: [],
      textList: [],
      keywords: [],
      loading: false,
      finished: false,
      page: "",
      isShow: false,
    };
  },
  created() {
    this.city();
  },
  computed:{
    nowCity(){
   const res = getCity()
   return  res.label
    }
  },
  methods: {
    async city() {
      let cityn
      if (this.nowCity) {
        cityn = [{ label: `${this.nowCity} ` }];
      } else {
        cityn = [{ label: "北京" }];
      }

      const res = await cityList(1);
      // console.log(res);
      this.textList = res.body;
      const hot = await hotcity();
      // console.log(hot);
      this.hotList=hot.body
     
      const list = this.textList.sort((a, b) =>
      a.pinyin.localeCompare(b.pinyin))
      const groups = [];
      let childList = [];
      for (let i = 0; i < list.length; i++) {
        const itemChar = list[i].pinyin.charAt(0);
        let preChar;
        if (i !== 0) {
          preChar = list[i - 1].pinyin.charAt(0);
        }
        // 当前首字母和上一个不一样，把分组放进列表
        if (itemChar !== preChar) {
          groups.push({ code: preChar, list: childList });
          childList = [];
        }
        childList.push(list[i]);
        // 循环结束，把最后的分组放进去
        if (i === list.length - 1) {
          groups.push({ code: itemChar, list: childList });
        }
      }
      this.indexList = groups;
      // console.log(this.indexList); 
      this.indexList[0].code = "热门城市";
      this.indexList[0].list = this.hotList;
      this.indexList = [{ code: "当前城市", list: cityn }, ...this.indexList];
      const keywords = [];
      this.indexList.forEach((item) => {
        if (item.code) {
          item.code = item.code.toUpperCase();
          keywords.push(item.code);
        }
      });
      // console.log(keywords)
      this.keywords = keywords;
      this.keywords.splice(0, 1, "#");
      // console.log(this.indexList);
      this.loading = true;
      this.finished = true;
    },

    async chooseu(val) {
      console.log(val);
      this.isShow = true;
      // const res = await cityinfo('北京')
      const res= await houseinfo(val.value);
      console.log(res);
      const info = res.body
          if (info) {
            setCity({ 
              label: val.label,
              id: val.value 
             });
            this.$router.back();
          } else {
            this.$toast.fail("该城市暂无房源，请重新选择");
          }
      this.isShow = false;
    },
  },
};
</script>

<style scoped lang="less">
::v-deep .van-index-anchor {
  color: rgb(171, 171, 171);
}

::v-deep .van-index-bar__index {
  font-size: 14px; // 更改字体大小
  line-height: 17px; // 更改行高
  margin-top: 5px; // 更改上边距
  margin-bottom: 5px; // 更改下边距
}

::v-deep .van-index-bar__sidebar {
  // display: flex;
  flex: 1;
}

.navbar {
  z-index: 111111;
}

.gaodu {
  margin-top: 47px;
}

::v-deep .van-nav-bar .van-icon {
  color: rgb(28, 182, 118);
}

::v-deep .van-nav-bar__content {
  background-color: rgb(28, 182, 118);
}

::v-deep .van-nav-bar__title {
  color: white;
}

::v-deep .van-nav-bar .van-icon {
  color: white;
}
</style>
